﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">DataWindow</title>
  <keywords>
    <keyword translate="true">DataWindow</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">DataWindow</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">When developing software in WPF or Silverlight, most developers always need the following three types of windows:</text></para>
    <list id="106" type="ul" listtype="bullet" formatstring="&#183;" format-charset="SYMBOL_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal (list)" style="font-family:Symbol; font-size:10pt; color:#000000;">
      <li styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">OK / Cancel buttons for data windows;</text></li>
      <li styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">OK / Cancel / Apply buttons for application settings / options;</text></li>
      <li styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Close button on windows for action windows.</text></li>
    </list>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Creating these windows is just boring and the steps are always the same:</text></para>
    <list id="107" type="ol" listtype="decimal" formatstring="&#37;&#48;&#58;&#115;&#46;" format-charset="DEFAULT_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal" style="font-family:Arial; font-size:10pt; color:#000000;">
      <li styleclass="Normal"><text styleclass="Normal" translate="true">Create a </text><text styleclass="Normal" style="font-style:italic;" translate="true">WrapPanel</text><text styleclass="Normal" translate="true"> at the bottom of the window</text></li>
      <li styleclass="Normal"><text styleclass="Normal" translate="true">Add the buttons with the same </text><text styleclass="Normal" style="font-style:italic;" translate="true">RoutedUICommand</text><text styleclass="Normal" translate="true"> (or </text><text styleclass="Normal" style="font-style:italic;" translate="true">ICommand</text><text styleclass="Normal" translate="true">) objects over and over again</text></li>
    </list>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true"> class makes it much easier to create these basic windows, simply by specifying the mode of the Window. By using this window, you can concentrate on the actual implementation and you don’t have to worry about the implementation of the buttons itself, which saves you time! </text></para>
    <para styleclass="Normal"><image src="datawindow.png" scale="100.00%" styleclass="Image Caption"></image></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Using custom buttons</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">It is possible to use custom buttons and still be able to use the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true">.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">1. First, use the base constructor to specify that you want to use custom mode.</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:italic; text-decoration:none; color:#000000;" translate="true">/// &lt;summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; text-decoration:none; color:#000000;" translate="true">/// Upload window.</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; text-decoration:none; color:#000000;" translate="true">/// &lt;/summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">class</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">UploadWindow</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">:</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">Window&lt;UploadViewModel&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">UploadWindow()</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">:</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">base</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">(DataWindowMode.Custom)</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">InitializeComponent();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">}</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">}</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">2. Add the custom buttons. This must be done </text><text styleclass="Normal" style="font-weight:bold;" translate="true">before</text><text styleclass="Normal" style="font-weight:normal;" translate="true"> the call to </text><text styleclass="Normal" style="font-weight:normal; font-style:italic;" translate="true">InitializeComponent</text><text styleclass="Normal" style="font-weight:normal; font-style:normal;" translate="true">.</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:italic; text-decoration:none; color:#000000;" translate="true">/// &lt;summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; text-decoration:none; color:#000000;" translate="true">/// Upload window.</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:italic; text-decoration:none; color:#000000;" translate="true">/// &lt;/summary&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">class</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">UploadWindow</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">:</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">Window&lt;UploadViewModel&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">public</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">UploadWindow()</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">:</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000000;" translate="true">base</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">(DataWindowMode.Custom)</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">{</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">AddCustomButton(new DataWindowButton(&quot;Upload&quot;, &quot;Upload&quot;));</text><br/><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">InitializeComponent();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#ffffff;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">}</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">}</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">If you are using Silverlight and intermediate classes, you can implement this in your intermediate class.</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Styling the DataWindow</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Starting with Catel 2.4, the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_DataWindow" styleclass="Normal" translate="true">DataWindow</link><text styleclass="Normal" translate="true"> has its own styles. These are located in </text><text styleclass="Normal" style="font-style:italic;" translate="true">DataWindow.generic.xaml. </text><text styleclass="Normal" style="font-style:normal;" translate="true">Below is a table that contains the available styles and a short description.</text></para>
    <para styleclass="Normal"><table styleclass="Default" rowcount="4" colcount="2">
      <tr style="vertical-align:top">
        <td style="width:235px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" style="font-weight:bold;" translate="true">Style key</text></para>
        </td>
        <td style="width:489px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" style="font-weight:bold;" translate="true">Description</text></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:235px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">DataWindowStyle</text></para>
        </td>
        <td style="width:489px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">The actual window style which can be used to decorate or customize the window itself.</text></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:235px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">DataWindowButtonContainerStyle</text></para>
        </td>
        <td style="width:489px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">The container that is used for the buttons. This is a </text><text styleclass="Normal (list)" style="font-style:italic;" translate="true">WrapPanel</text><text styleclass="Normal (list)" translate="true">, so the styles must match that.</text></para>
        </td>
      </tr>
      <tr style="vertical-align:top">
        <td style="width:235px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">DataWindowButtonStyle</text></para>
        </td>
        <td style="width:489px;">
          <para styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">The style for the buttons. By default, the buttons are right aligned and have a fixed size.</text></para>
        </td>
      </tr>
    </table></para>
  </body>
</topic>
